<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Element object Demo</title>
    <style media="screen">
      .divdemo1 {
        width: 500px;
        height: 150px;
        border: solid red 2px;
        font-weight: bold;
      }
      .divdemo2 {
        color: white;
        background-color: blue;
      }
      .thirdClass {
          text-transform: uppercase;
          text-align: center;
          font-size: 10px;
      }
    </style>
  </head>
  <body lang="en-us">
    <div style="border:solid yellow 2px;width:100%;">
      <b id="demo1" style="color:lime;background-color:black;">单击按钮，查看按钮元素有多少个属性</b>
      <input type="button" name="button" value="Element.attributes" onclick="attr();">
    <br><hr>
      <b id="demo2" style="color:lime;background-color:black;">单击“按钮”获取有关身体元素的子节点的信息</b>
      <input type="button" name="button" value="Element.childNodes" onclick="childNodesFun();">
    <br><hr>
      <b id="demo4"  class="thirdClass">单击“按钮”获取class类属性值或设置class属性值</b>
      <input type="button" name="button" value="Element.className" onclick="classNameFun();">
    <br><hr>
      <b id="demo5" style="color:lime;background-color:black;">单击“按钮”返回元素的id</b>
      <input type="button" name="button" value="Element.id" onclick="idFun();">
    <br><hr>
      <b id="demo6" style="color:lime;background-color:black;">单击“按钮”获取标签名</b>
      <input type="button" name="button" value="Element.tagName" onclick="getTag();">
    <br><hr>
        <a id="1" href="http://www.w3cschool.cc">1</a>
        <a id="2" href="http://www.w3cschool.cc">2</a>
        <a id="3" href="http://www.w3cschool.cc">3</a>
        <input type="button" onclick="changeTabIndex()" value="改变标签索引">
        <p>试着先使用“Tab”按钮导航到链接之后你单击“改变标签索引”按钮。3 - 2 - 1</p>

    <hr>
        <p id="demo8" style="color:lime;background-color:black;" dir="rtl">单击“按钮”改变文本的方向</p>
        <input type="button" name="button" value="Element.dir" onclick="changeDir();">

    <br><hr>
          <p id="demo9" style="color:lime;background-color:black;">单击“按钮”属性设置或返回元素的语言</p>
          <input type="button" name="button" value="Element.lang" onclick="changeLang();">


        <br><hr>
            <p id="demo10" style="color:lime;background-color:black;">单击“按钮”返回元素的样式</p>
            <input type="button" name="button" value="Element.style" onclick="changeStyle();">

        <br><hr>
             <b id="demo11" style="color:lime;background-color:black;" title="test">单击“按钮”获取title值</b>
             <input type="button" name="button" value="Element.title" onclick="getTitle();">

    </div>
<script type="text/javascript">
  function $(id) {return document.getElementById(id)};
  function attr(){
    var btn=document.getElementsByTagName('input')[0];
    console.log("属性长度："+ btn.attributes.length + " ------------ 第二个属性值："+btn.attributes[1].value);  //注意这里需要获取value才能在log中输出否则输出对象
  }
  function childNodesFun(){
    var doc=document.body.childNodes;
    console.log("body中子节点长度：" + doc.length + " ------------ 获取第2个子节点的值：'"+ doc[1].childNodes[1].innerHTML +"'");
  }
  function classNameFun(){
    var styleValue=$('demo4').className;
    console.log("class类名字："+ styleValue +" ----------- 已设置class类divdemo2");
    $('demo4').className="divdemo2";
  }

  function idFun(){
    console.log("返回的id："+ $('demo5').id);
  }

  function getTag(){
    console.log("返回id为demo6的元素标签："+$('demo6').tagName);
  }

  function changeTabIndex(){
    document.getElementById('1').tabIndex="3";
    document.getElementById('2').tabIndex="2";
    document.getElementById('3').tabIndex="1";
  }

  function changeDir(){
    if ($('demo8').dir=="rtl") {
      $('demo8').dir="ltr";
    }else {
      $('demo8').dir="rtl";
    }
  }

  function changeLang(){
    console.log("当前网页语言："+document.getElementsByTagName('body')[0].lang);
  }

  function changeStyle(){
    console.log("id为demo10的样式值："+$('demo10').style.cssText +"  ------- 同时还能设置样式哟");
    //注意是个坑" ElementNode.style.cssText "返回文本
    $('demo10').style="color:red;background-color:yellow";
    //ElementNode.style.color="red";
  }

  function getTitle(){
    console.log("获取原本的title值："+$('demo11').title+ "---------- 还可以设置title");
    $('demo11').title="这个是新创建的title文本";
  }

</script>

<br><hr>
  <b id="demo0" style="color:lime;background-color:black;">单击“按钮”切换类名,删除,修改，添加类</b>
  <input type="button" name="button" value="Element.classList.add()" onclick="addClass();">
  <input type="button" name="" value="Element.classList.toggle()" onclick="changeClass();">
  <input type="button" name="" value="Element.classList.remove()" onclick="removeClass();">
  <button type="button" name="button" onclick="getClass();">获取类名.item()</button>
  <button type="button" name="button" onclick="containsFun();">判断是否存在类名.contains()</button>
  <div id="divd1">
    <p id="demo3">这里是演示的代码效果</p>
  </div>
  <script type="text/javascript">
  function addClass(){
    $('divd1').classList.add("divdemo1","divdemo2");
  }
  function changeClass(){
    $('divd1').classList.toggle("thirdClass");
  }
  function removeClass(){
    $('divd1').classList.remove("divdemo2");
  }
  function getClass(){
    $('demo3').innerHTML += "获取div元素的类名: " + $('divd1').classList;
    $('demo3').innerHTML += "<br>获取div元素的类名长度: " + $('divd1').classList.length;
    $('demo3').innerHTML += "<br>获取div元素的第一个类名（索引为0）:" + $('divd1').classList.item(0);
  }
  function containsFun(){
    if($('divd1').classList.contains("divdemo2")){
      alert('存在重复的类名');
    }else {
      alert('不存在重复的类名');
    }
  }
  </script>
  <br><hr>
    <b id="demo12" style="color:lime;background-color:black;" onmouseover="contentEa();" >用于设置或返回元素的内容是否可编辑(鼠标移动这里进行触发)</b>
    <p id="input1" style="border:solid red 1px;" contenteditable="true">Element.contentEditable 查看是否可以编辑</p>
    <input type="button" name="" value="Element.iscontentEditble" onclick="iscontentFun();">
    <br><hr>
      <b id="demo100" style="color:lime;background-color:black;">textContent 属性设置或者返回指定节点的文本内容</b><br>
      <input type="button" name="" value="Element.textContent" onclick="textCt();">
<script type="text/javascript">
  function contentEa(){
    if($('input1').contentEditable == "true"){
      $('input1').contentEditable = "false";
      alert("p标签不可编辑");
    }else {
      $('input1').contentEditable = "true";
      alert("p标签可编辑");
    }
  }

  function iscontentFun(){
    console.log("判断p是否可以编辑: "+$('input1').isContentEditable);
  }

  function textCt(){
    var txtC = $('demo100').textContent;
    var txtN = $('demo100').firstChild.nodeValue;
    console.log("textContent 属性: "+txtC);
    console.log("nodeValue 属性: "+txtN);
  }
</script>
<br>
<br>
<br>
<h1 style="text-align:center;color:red">元素方法</h1>
<hr>
<p style="color:white;background-color:lime">Element.compareDocumentPosition()</p>
<i id="node1">Node 1</i>
<b id="node2">Node 2</b>
<input type="button" name="" value="判断节点的位置" onclick="compareFun();">
<hr>
<p style="color:white;background-color:lime">Element.getAttribute() / .getAttributeNode()</p>
<input id="input2" type="text" name="文本1" value="" placeholder="获取属性或设置属性">
<a href="#" target="_self" title="这是一个空连接">a tag</a>
<input type="button" name="" value="getAttribute-node()" onclick="getAttr();">
<hr>
<p style="color:white;background-color:lime">Element.hasAttribute() / .hasAttributes()</p>
<a href="#" title="这也是一个属性" rel="next">属性验证1</a>
<b>属性验证2</b>
<input type="button" name="" value=".hasAttribute/s()" onclick="hasAttr();">

<script type="text/javascript">
function compareFun(){
  var position = $('node1').compareDocumentPosition($('node2'));
  console.log("位置号："+position);
}
function getAttr(){
  console.log("input标签的placeholder值："+$('input2').getAttribute('placeholder'));
  console.log("a标签的target值："+document.getElementsByTagName('a')[3].getAttributeNode('target').value);
  document.getElementsByTagName('a')[3].getAttributeNode('title').value="还可以设置属性";
}
function hasAttr(){
  var atag=document.getElementsByTagName('a')[4];
  console.log("a标签是否存在title属性："+atag.hasAttribute('title'));
  var btag=document.getElementsByTagName('b')[10];
  console.log("b标签是否存在属性："+btag.hasAttributes());
}
</script>
  </body>
</html>
